<script lang="ts" setup>
import { computed, onActivated, onMounted, ref, watchEffect } from 'vue';
import ReCol from '@/components/MyCol';
import { useDark } from './utils/utils';
import { ReNormalCountTo } from '@/components/CountTo';
import ChartLine from '@/views/welcome/components/ChartLine.vue';
import ChartRound from '@/views/welcome/components/ChartRound.vue';
import { chartData } from './utils/data';
import { TabsPaneContext } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue';
import { useOverviewStore } from '@/store/modules/overview';

const { isDark } = useDark();

// 当前tab名称
const activeName = ref('web');

// 获取store
const overviewStore = useOverviewStore();

// 修改tab名称
const onTabClick = (tab: TabsPaneContext, _: Event) => {
	activeName.value = tab.paneName as string;
};

// 更新图表数据
const updateChartData = () => {
	if (overviewStore.overviewData) {
		const data = overviewStore.overviewData;

		// 更新节点数据
		chartData[0].value = data.nodeCount;
		chartData[0].data = data.nodeData;
		chartData[0].percent = `+${Math.floor(data.nodeCount / 1000)}%`;

		// 更新关系数据
		chartData[1].value = data.relationshipCount;
		chartData[1].data = data.relationshipData;
		chartData[1].percent = `+${Math.floor(data.relationshipCount / 500)}%`;

		// 更新文件数据
		chartData[2].value = data.fileCount;
		chartData[2].data = data.fileData;
		chartData[2].percent = `+${Math.floor(data.fileCount / 200)}%`;

		// 更新案例数据
		chartData[3].value = data.caseCount;
		chartData[3].data = data.caseData;
		chartData[3].percent = `+${Math.floor(data.caseCount)}%`;
	}
};

// 当组件挂载和激活时获取数据
onMounted(() => {
	overviewStore.fetchOverviewData();
	overviewStore.fetchCaseRanking();
});

onActivated(() => {
	overviewStore.fetchOverviewData();
	overviewStore.fetchCaseRanking();
});

// 监听数据变化，更新图表
watchEffect(() => {
	if (overviewStore.overviewData) {
		updateChartData();
	}
});
</script>

<template>
	<div>
		<el-row :gutter="24" justify="space-around">
			<re-col
				v-for="(item, index) in chartData"
				:key="index"
				v-motion
				:enter="{ opacity: 1, y: 0, transition: { delay: 80 * (index + 1) } }"
				:initial="{ opacity: 0, y: 100 }"
				:md="12"
				:sm="12"
				:value="6"
				:xs="24"
				class="mb-[18px]"
			>
				<el-card class="line-card" shadow="never" v-loading="overviewStore.loading">
					<div class="flex justify-between">
						<span class="text-md font-medium">
							{{ item.name }}
						</span>
						<div :style="{ backgroundColor: isDark ? 'transparent' : item.bgColor }" class="w-8 h-8 flex justify-center items-center rounded-md">
							<IconifyIconOffline :color="item.color" :icon="item.icon" width="18" />
						</div>
					</div>
					<div class="flex justify-between items-start mt-3">
						<div class="w-1/2">
							<ReNormalCountTo :duration="item.duration" :endVal="item.value" :fontSize="'1.6em'" :startVal="0" />
							<p class="font-medium text-green-500">{{ item.percent }}</p>
						</div>
						<ChartLine v-if="item.data.length > 1" :color="item.color" :data="item.data" class="!w-1/2" />
						<ChartRound v-else class="!w-1/2" />
					</div>
				</el-card>
			</re-col>
		</el-row>

		<!-- 案例排行榜 -->
		<el-row :gutter="24" class="mt-4">
			<re-col
				:md="24"
				:sm="24"
				:xs="24"
				v-motion
				:enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
				:initial="{ opacity: 0, y: 100 }"
			>
				<el-card shadow="never" v-loading="overviewStore.rankingLoading">
					<template #header>
						<div class="flex justify-between items-center">
							<span class="text-md font-medium">案例点击量排行榜</span>
							<el-tooltip content="案例点击量前十排行" placement="top">
								<el-icon><InfoFilled /></el-icon>
							</el-tooltip>
						</div>
					</template>
					<el-table :data="overviewStore.caseRanking" stripe style="width: 100%" height="350">
						<el-table-column type="index" label="排名" width="80" align="center">
							<template #default="scope">
								<div class="flex justify-center items-center">
									<el-tag v-if="scope.$index < 3" :type="['danger', 'warning', 'success'][scope.$index]" effect="plain" class="px-3">
										{{ scope.$index + 1 }}
									</el-tag>
									<span v-else>{{ scope.$index + 1 }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="caseName" label="案例名称" min-width="180" show-overflow-tooltip />
						<el-table-column prop="caseType" label="案例类型" min-width="120" align="center" />
						<el-table-column prop="clickCount" label="点击次数" min-width="120" align="center">
							<template #default="scope">
								<span class="font-medium" :class="scope.$index < 3 ? 'text-red-500' : ''">{{ scope.row.clickCount }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120" align="center" fixed="right">
							<template #default="scope">
								<el-button link type="primary" @click="$router.push(`/kg/case/detail-view/${scope.row.caseId}`)">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</re-col>
		</el-row>
	</div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
	--el-card-border-color: none;

	/* 解决概率进度条宽度 */
	.el-progress--line {
		width: 85%;
	}

	/* 解决概率进度条字体大小 */
	.el-progress-bar__innerText {
		font-size: 15px;
	}

	/* 隐藏 el-scrollbar 滚动条 */
	.el-scrollbar__bar {
		display: none;
	}

	/* el-timeline 每一项上下、左右边距 */
	.el-timeline-item {
		margin: 0 6px;
	}
}

.main-content {
	margin: 20px 20px 0 !important;
}
</style>
